<template>
  <base-modal :width="modAlProps.width" :isVisible="props.isVisible" :title="modAlProps.title" :buttons="buttons"
    cancleText="关闭" @handleOk="buttonMessage" @handleCancle="handleCancle" class="versionDetail">
    <template v-slot:body>
      <div class="versionComparisonBox" id="version_modelBox">
        <div class="versionCententTitle">
          <div>
            <span>版本号：</span>
            <span>{{ versionCode }}</span>
          </div>
          <div>
            <span>操作人：</span>
            <span>{{ createUser }}</span>
          </div>
          <div>
            <span>保存时间：</span>
            <span>{{ createTime }}</span>
          </div>
        </div>
        <baseTabs @changeTabs="changeTopTabs" :activeKey="contentType" :tabsList="tabsList"></baseTabs>
        <div class="versionCententBox">
          <div class="versionCentent">
            <div class="versionCententLeft">
              <div class="contentLR">
                <div v-html="detailData[contentType]" class="contentRight"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </base-modal>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  defineComponent,
  createVNode,
  watch,
} from "vue";
import baseModal from "@/components/modal/baseModal.vue";
import baseTabs from "@/components/tabs/baseTabs.vue";
import { scrollType } from "@/type.d";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { dataSourceType, detailDataItemType } from "@/type";
import request from "@/api/index";
import { Modal, message } from "ant-design-vue";
import { number } from "echarts";

const props = defineProps({
  versionId: {
    type: Number,
    default: null,
  },
  isVisible: {
    type: Boolean,
    default: false,
  },
  contentId: {
    type: Number,
    default: null,
  },
});
console.log(props, "propsprops");
//模态框数据
const modAlProps = reactive<dataSourceType>({
  width: "L",
  title: "查看详情",
});
const tabsList = ref<dataSourceType>([]);
// const tabsList1 = [];
const detailData = ref<dataSourceType[]>([]);
const contentType = ref(0);
const createTime = ref<string>("");
const sourceVersionId = ref<string>("");
const createUser = ref<string>("");
const versionCode = ref<string>("");
// props.detailData.map = (s: any) => {};
const formState = ref<dataSourceType>({});
const remark = ref<string>("");
// watch(
//   () => tabsList.value,
//   (newVal, oldVal) => {
//     console.log("sss");
//     tabsList1 = newVal;
//   },
//   { deep: true }
// );
//改变头部tab切换
const changeTopTabs = (activeKey: number) => {
  console.log(activeKey, "sss");
  contentType.value = activeKey;
};
//模态框button按钮个数和文案修改
const emits = defineEmits(["handleOk", "handleCancle"]);
const handleOk = () => {
  emits("handleOk");
};

const handleCancle = (e: MouseEvent) => {
  emits("handleCancle", e);
};
let buttons = ref<dataSourceType[]>([]);

buttons.value = [
  {
    text: "删除此版本",
    type: "dashed",
    cz: "deleteRight",
  },
  {
    text: "恢复此版本",
    cz: "restoreRight",
  },
];
const buttonMessage = async (msg: dataSourceType) => {
  if (msg.cz == "deleteRight") {
    request
      .fetchContentVersionDelete({
        ids: [props.versionId],
      })
      .then((res: any) => {
        if (res.code == "00000 00000") {
          handleOk();
          message.success(res.message);
        } else {
          message.error(res.message);
        }
      })
      .catch((err: any) => {
        throw new Error(err);
      });
  } else if (msg.cz == "restoreRight") {
    request
      .fetchContentVersionRestore({ id: props.versionId })
      .then((res: any) => {
        if (res.code == "00000 00000") {
          handleOk();
          message.success(res.message);
        } else {
          message.error(res.message);
        }
      })
      .catch((err: any) => {
        throw new Error(err);
      });
  }
};
// 查看详情
const fetchContentVersionDetail = async (val: any) => {
  let data = await request.fetchContentVersionDetail({ id: val });
  createTime.value = data.createTime;
  sourceVersionId.value = data.id;
  createUser.value = data.createUser;
  versionCode.value = data.versionCode;
  let arr = Object.keys(data.txts);
  arr.reverse();
  arr?.map((item: any, index: any) => {
    tabsList.value.push({ tabName: item, key: index });
  });
  detailData.value = Object.values(data.txts);
  detailData.value.reverse();
};
onMounted(async () => {
  fetchContentVersionDetail(props.versionId);
});
</script>

<style lang="less" scoped>
.versionDetail {
  .versionComparisonBox {
    .versionCententTitle {
      width: 772px;
      height: 55px;
      padding: 0 24px;
      background: rgba(0, 0, 0, 0.02);
      padding-right: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        height: 14px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
      }

      span:nth-child(2) {
        color: rgba(0, 0, 0, 0.85);
        margin: 0 8px;
      }
    }

    .versionCententBox {
      margin-top: 24px;

      .versionCentent {
        // height: 300px;
        display: flex;

        .versionCententLeft,
        .versionCententRight {

          // height: 200px;
          // border: 1px solid seagreen;
          .contentLR {
            display: flex;
            height: fit-content;

            .contentLeftRed {
              background: #ffccc7;
            }

            .contentRight {
              padding: 12px 0px;
            }
          }
        }

        .versionCententLeft {
          // background: saddlebrown;
        }

        .versionCententRight {
          // background: firebrick;
        }
      }
    }
  }
}
</style>
